<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app">
  <!-- render main view here -->
  <component :is="routeTable[hash] || NotFound"></component>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
</div>

<script>
  // '#/foo' -> Foo
  // '#/bar' -> Bar
  // '#/404' -> NotFound

  const Foo = { template: `<div>foo</div>` }
  const Bar = { template: `<div>bar</div>` }
  const NotFound = { template: `<div>not found!</div>` }

  const routeTable = {
    '#foo': Foo,
    '#bar': Bar
  }

  window.addEventListener('hashchange', () => {
    app.hash = window.location.hash
  })

  const app = new Vue({
    el: '#app',
    data() {
      return {
        hash: window.location.hash,
        routeTable,
        NotFound
      }
    }
  })
</script>